<template>
  <div class="v-simple-cropper">
    <slot>
    </slot>
    <input v-if="type==1"  class="file" type="file" ref="graphfile" @change="onChange($event)" accept="image/*" capture="camera" />
    <input v-if="type==2"  class="file" ref="file" type="file" accept="image/*" @change="uploadChange">
    <div class="v-cropper-layer" ref="layer">
      <div class="layer-header">
        <button class="cancel" @click="cancelHandle">取消</button>
        <button class="confirm" @click="confirmHandle">裁剪</button>
      </div>
      <img ref="cropperImg">
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
import {uploadavatar} from "../api/user";
export default {
  name: 'v-simple-cropper',
  props: {
    initParam: Object,
    type: Number,
    successCallback: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      cropper: {},
      filename: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    onChange(e){
      let file = e.currentTarget.files[0]; //console.log('图片原文件信息',file);
      this.filename = file['name']
      let URL = window.URL || window.webkitURL
      this.$refs['layer'].style.display = 'block'
      this.cropper.replace(URL.createObjectURL(file))
    },
    // 初始化裁剪插件
    init () {
      let cropperImg = this.$refs['cropperImg']
      this.cropper = new Cropper(cropperImg, {
        aspectRatio: 1 / 1,
        dragMode: 'move'
      })
    },
    // 点击上传按钮
    uploadss(){
      if(this.type==1){
        this.$refs.graphfile.click()
      }else if(this.type==2){
        this.$refs.file.click()
      }
    },
    // 选择上传文件
    uploadChange (e) {
      let file = e.target.files[0]
      this.filename = file['name']
      let URL = window.URL || window.webkitURL
      this.$refs['layer'].style.display = 'block'
      this.cropper.replace(URL.createObjectURL(file))
    },
    // 取消上传
    cancelHandle () {
      this.cropper.reset()
      this.$refs['layer'].style.display = 'none'
      this.$refs['file'].value = ''
    },
    // 确定上传
    confirmHandle () {
      let cropBox = this.cropper.getCropBoxData()
      let scale = this.initParam['scale'] || 1
      let cropCanvas = this.cropper.getCroppedCanvas({
        width: cropBox.width,
        height: cropBox.height
      })
      let imgData = cropCanvas.toDataURL('image/jpeg')
      console.log("====cropCanvas",cropCanvas)
      let formData = new FormData()
      formData.set('file', imgData);
      formData.set('type', 'base64');
      // formData.append('fileType', this.initParam['fileType'])
      formData.append('img', imgData)
      console.log(imgData,"=imgData",  this.dataURLtoBlob(imgData))
      // formData.append('signId', this.$localStorage('signId'))
      formData.append('originalFilename', this.filename)
      console.log("=====formData",formData)
      uploadavatar(formData).then(res => {
        this.successCallback(res)
        this.cancelHandle()
      })
    },
    // base64 转 二进制流(blob)
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },

  }
}
</script>

<style lang="less">
.v-simple-cropper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  .file {
    display: none;
  }
  .v-cropper-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 199999;
    display: none;
    .layer-header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99999;
      background: #fff;
      width: 100%;
      height: .9rem;
      padding: 0 .2rem;
      box-sizing: border-box;
    }
    .cancel,
    .confirm {
      line-height: .8rem;
      font-size: .58rem;
      background: inherit;
      border: 0;
      outline: 0;
      float: left;
    }
    .confirm {
      float: right;
      color: #0AD39F;
    }
    img {
      position: inherit!important;
      border-radius: inherit!important;
      float: inherit!important;
    }
  }
}
.cropper-point{
  background-color: #0AD39F;
}
.cropper-point.point-se:before{
  background-color: #0AD39F;
}
.cropper-line {
  background-color: #0AD39F;
}
</style>
